<template>
  <div class="app-container">
    <el-row :gutter="20" class="question-edit-contain">
      <el-col :span="24">
        <el-card>
          <el-form
            :model="form"
            ref="form"
            label-width="100px"
            v-loading="formLoading"
            :rules="rules"
          >
            <el-row :span="24" style="margin-bottom: 20px">
              <el-col :span="24">
                <el-button
                  type="primary"
                  :size="defaultFormItemSize"
                  plain
                  @click="downloadTemplate()"
                  >下载导入模版</el-button
                >
              </el-col>
            </el-row>
            <el-row :gutter="20" v-if="moduleType === 3">
              <el-col :span="24">
                <el-form-item label="所属人员类型:" label-width="100px">
                  <el-select
                    class="filter-item"
                    v-model="form.personnelType"
                    :clearable="true"
                    placeholder=""
                    filterable
                  >
                    <el-option
                      v-for="item in personnelTypeList"
                      :key="item.id"
                      :value="item.id"
                      :label="item.name"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-upload
                  class="upload-demo"
                  :before-upload="beforeUpload"
                  :on-change="handleChange"
                  action="#"
                  :auto-upload="false"
                  :multiple="false"
                  :file-list="fileList"
                  accept=".xls,.xlsx"
                  :limit="1"
                >
                  <el-button size="small" type="primary">点击上传数据表</el-button>
                  <div slot="tip" class="el-upload__tip">只能上传xls/xlsx文件</div>
                </el-upload>
              </el-col>
            </el-row>
            <el-row style="margin-top: 20px">
              <el-col :span="24">
                <el-button type="primary" @click="submitForm()">导入</el-button>
                <el-button @click="resetForm()">重置</el-button>
              </el-col>
            </el-row>
          </el-form>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { DictionaryController, BizSubjectController, SysUserController } from '@/api';
export default {
  name: 'formImportBizSubject',
  props: {
    moduleType: Number
  },
  data() {
    return {
      form: {
        personnelType: null,
        moduleType: this.moduleType,
        file: null
      },
      fileList: [],
      personnelTypeList: [],
      moduleTypeList: [],
      formLoading: false,
      rules: {
        personnelType: [{ required: true, message: '请输入选择人员类型', trigger: 'change' }],
        moduleType: [{ required: true, message: '请输入选择模块类型', trigger: 'change' }]
      }
    };
  },
  created() {
    this.loadPersonnelTypeDropdownList();
    this.loadModuleTypeDropdownList();
  },
  methods: {
    beforeUpload(file) {
      if (this.fileList.length > 0) {
        this.fileList = [];
      }
      this.fileList.push(file);
      return true;
    },
    handleChange(file, fileList) {
      this.fileList = fileList;
    },
    onCancel(isSuccess = false) {
      if (this.observer != null) {
        this.observer.cancel(isSuccess);
      }
    },
    loadPersonnelTypeDropdownList() {
      return new Promise((resolve, reject) => {
        let params = {
          dictCode: 'PersonnelType'
        };
        DictionaryController.dictGlobalDict(this, params)
          .then(res => {
            this.personnelTypeList = res.getList();
            this.personnelTypeList = this.personnelTypeList.filter(item => item.id !== '1');
          })
          .catch(e => {
            reject(e);
          });
      });
    },
    loadModuleTypeDropdownList() {
      return new Promise((resolve, reject) => {
        let params = {
          dictCode: 'ModuleType'
        };
        DictionaryController.dictGlobalDict(this, params)
          .then(res => {
            this.moduleTypeList = res.getList();
          })
          .catch(e => {
            reject(e);
          });
      });
    },
    resetForm() {
      this.form = {
        personnelType: null,
        moduleType: null,
        file: this.fileList[0].raw
      };
      this.$refs['form'].resetFields();
    },
    submitForm() {
      console.log(this.fileList);

      const loading = this.$loading({
        lock: true,
        text: '导入中，请稍后...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });

      this.$refs.form
        .validate()
        .then(valid => {
          if (valid) {
            if (this.fileList.length > 0) {
              if (this.form.moduleType === 2) {
                this.form.personnelType = 1;
              }
              let fd = {
                personnelType: this.form.personnelType,
                moduleType: this.form.moduleType,
                file: this.fileList[0].raw
              };
              BizSubjectController.uploadSubject(this, fd)
                .then(res => {
                  if (res.success) {
                    this.$message.success('upload success.');
                    this.onCancel(true);
                    this.$router.replace({ name: 'formsBizSubject' });
                  } else {
                    this.$message.error('upload failed.');
                  }
                })
                .catch(e => {
                  console.error(e);
                });
            } else {
              this.$message.warning('please upload file');
            }
          } else {
            this.$message.warning('please select');
          }
        })
        .finally(loading.close());
    },
    downloadTemplate() {
      BizSubjectController.downloadTemplate(this, {}, 'subject_template.xlsx').then(response => {});
    }
  },
  mounted() {}
};
</script>
<style type="scss" scoped></style>
